<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS object Fit and position</title>
    <style>
        .container {
            height: 488px;
            width: 466px;
            border: 2px solid black;
            /* background-color: azure; */
            background-position: center center;
            background-clip: border-box;

            background-image: url("https://us.123rf.com/450wm/progressman/progressman1909/progressman190900115/130695651-woman-in-black-coat-walking-along-the-sea.jpg?ver=6");
            background-repeat: no-repeat;
        }

        img {
            width: 466px;
            height: 488px;
            object-fit: contain;
            /* object-fit: fill; */
            object-position: 10px 20px;
            /* object-position: bottom right; */
            /* object-fit: contain; */
        }
    </style>
</head>

<body>
    <div class="container">
        
        <!-- <img src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D" alt=""> -->
    </div>
</body>

</html>